<!-- 备注： 调用方法，写在调用的页面 （只适用于APP）

参考文档的链接： https://blog.csdn.net/qq_40393313/article/details/108005357?utm_medium=distribute.pc_relevant.none-task-blog-searchFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-searchFromBaidu-1.control

// #ifdef APP-PLUS
	let wv = plus.webview.create("","custom-webview",{
		plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
		'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
		top:uni.getSystemInfoSync().statusBarHeight+44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
	})

	wv.loadURL('/hybrid/html/uploadfile.html');

	var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
	currentWebview.append(wv);//一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
	setTimeout(function() {
		console.log(wv.getStyle())
	}, 0);//如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
	// #endif
-->



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>本地网页</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		
		<!-- accept是用来规定选择文件的类型的 -->
		<input type="file" accept="">
	
		<!-- uni 的 SDK -->
		<!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
		<script type="text/javascript">
			let fileDom = document.querySelector(".file");
			//获得dom元素
			fileDom.addEventListener('change', (event) => {
			//监听input变化
				let file = fileDom.files[0];
			//获得input选择提交的文件
				var xhr = new XMLHttpRequest();
			
				var formData = new FormData();
				formData.append('fileDom', file);
				//将文件加入到formdata中
				xhr.open('POST', 'http://192.168.0.125:64000//api/doc/DocUploadForApp');
				//正常请求
				xhr.setRequestHeader('', '');
				//自定义header
				xhr.upload.addEventListener("progress", function(event) {
					if (event.lengthComputable) {
						let percent = Math.ceil(event.loaded * 100 / event.total) + "%";
						//实时监听文件上传的进度
						
						//可以使用plus.storage.setItem()本地缓存来和vue页面进行通讯
						
					}
				}, false);
				xhr.send(formData);
				xhr.onreadystatechange = function() {

					if (xhr.readyState == 4 && xhr.status == 200) {
						console.log(xhr.responseText);
						
						location.href = 'index.html';
				   //加载完成以后，调用一个页面自跳转，并且可以通过在vue界面调用this.wv.overrideUrlLoading()来截取并阻止这个跳转，达到在vue界面知道上传完成的情况
					} else {
						console.log(xhr.statusText);
					}
				}
			}, false);
		</script>
	</body>
</html>


